<template>
	<view class="share-bar-components" :style="[wrapStyle]" @click="handleGetPosition">
		<u-popup v-model="show" mode="bottom" height="650" border-radius="24" safe-area-inset-bottom>
			<view class="popup-wrap">
				<text class="title-text">分享当前商品</text>
				<view class="share-list">
					<view class="share-item">
						<image class="share-icon" src="../../static/icon/ALI_CODE_PAY.png" mode=""></image>
						<text class="share-text">微信</text>
					</view>
					<view class="share-item">
						<image class="share-icon" src="../../static/icon/ALI_CODE_PAY.png" mode=""></image>
						<text class="share-text">朋友圈</text>
					</view>
					<view class="share-item">
						<image class="share-icon" src="../../static/icon/ALI_CODE_PAY.png" mode=""></image>
						<text class="share-text">朋友圈</text>
					</view>
					<view class="share-item">
						<image class="share-icon" src="../../static/icon/ALI_CODE_PAY.png" mode=""></image>
						<text class="share-text">朋友圈</text>
					</view>
					<view class="share-item">
						<image class="share-icon" src="../../static/icon/ALI_CODE_PAY.png" mode=""></image>
						<text class="share-text">朋友圈</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import interceptor from '@/request/interceptor.js';
import mixins from '@/mixins/components.js';
export default {
	name: 'share-bar',
	mixins: [mixins],
	props: {
		show: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {};
	},
	methods: {}
};
</script>

<style scoped lang="scss">
.share-bar-components {
	.popup-wrap{
		display: flex;
		padding: 48rpx;
		flex-direction: column;
		.title-text{
			margin: 0 auto;
			font-size: 28rpx;
		}
		.share-list{
			display: flex;
			flex-wrap: wrap;
			.share-item{
				width: 130rpx;
				margin: 0 auto;
				display: flex;
				flex-shrink: 0;
				align-items: center;
				flex-direction: column;
				.share-icon{
					width: 105rpx;
					height: 105rpx;
				}
				.share-text{
					margin-top: 16rpx;
				}
			}
		}
	}
}
</style>
